<template>
    <div>
        <bs4-card>
            <div slot="header" class="row">
                <div class="col-auto mr-auto">短信发送失败列表</div>
                <div class="col-auto mr-auto ml-auto" style="color: #1ab394;">请操作完成之前，请勿刷新页面</div>
                <div class="col-auto">
                    <i-button type="primary" size="small" slot="extra" v-on:click="importInfo(1)"
                              >传入录取成功学生的excel表</i-button>
                    <i-button type="primary" size="small" slot="extra" v-on:click="importInfo(2)"
                              >传入未录取成功学生的excel表</i-button>
                    <input type="file" hidden id="excelFile" ref="importInfoFile" @change="getFile">
                </div>
            </div>
            <Row type="flex">
                <i-col span="24">
                    <div class="demo-spin-article">
                        <el-list :stateManager="stateManager" :tableList="tableList"></el-list>
                        <Spin fix size="large" v-if="stateManager.refreshList"></Spin>
                    </div>
                </i-col>
            </Row>
        </bs4-card>
    </div>
</template>

<script>
    import _table from './_table.vue';
    import SmsApi from '../../../api/sms/sms'
    export default {
        name: 'admin',
        components: {
            'el-list': _table
        },
        data: function () {
            return {
                stateManager: {
                    refreshList: false,
                    editDialogVisible: false,
                    editModelId: 0,
                    buttonLoading: false
                },
              tableList:{},
              tableId: null
            };
        },
        methods: {
              importInfo(id) {
                this.tableId = id
                this.$refs['importInfoFile'].click()
              },
              getFile(files){
                let self = this
                let input = document.getElementById('excelFile')
                let file = files.target.files[0]
//                console.log(file)
                if (file.type !== 'application/vnd.ms-excel'){
                  this.$Notice.error({
                    title: '文件格式不正确',
                    desc: '请上传excel表格'
                  })
                  return false
                }
                this.fileData = new FormData()
                this.fileData.append('file', file)
                this.fileData.append('table_id', this.tableId)
                SmsApi.postImportInfo(this.fileData).then(res=>{
                  console.log('上传'+ file.name +'成功')
                  input.value = ''
                  if (res.data.message) {
                    this.$Notice.success({
                      title: '成功',
                      desc: res.data.message,
                    });
                  } else {
                    self.tableList = res.data
                  }
                  self.refreshList = !self.refreshList
                }).catch(err=>{
                  self.refreshList = !self.refreshList
                  console.log(err.response)
                })
              },
        }
    }
</script>